<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图展示</title>
    <style>
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
      #allmap {
        position: relative;
      }
      #tools {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"
    ></script>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"
    ></script>
  </head>
  <body>
    <div id="allmap"></div>
    <div id="tools">
      <button id="start">播放动画</button>
      <button id="end">停止播放</button>
    </div>
  </body>
</html>
<script type="text/javascript">
  let bmap = new BMapGL.Map("allmap"); // 创建实例
  bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图坐标和缩放级别
  bmap.enableScrollWheelZoom(true); // 开启鼠标滑轮滚动缩放

  let path = [
    {
      lng: 116.297611,
      lat: 40.047363,
    },
    {
      lng: 116.308301,
      lat: 40.050566,
    },
    {
      lng: 116.305732,
      lat: 40.054957,
    },
    {
      lng: 116.304754,
      lat: 40.057953,
    },
    {
      lng: 116.306487,
      lat: 40.058312,
    },
    {
      lng: 116.307223,
      lat: 40.056379,
    },
  ];

  let point = [];
  for (let i = 0; i < path.length; i++) {
    point.push(new BMapGL.Point(path[i].lng, path[i].lat));
  }

  let pl = new BMapGL.Polyline(point);
  let trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
    overallView: true, // 动画完成后自动调整视野到总览
    tilt: 30, // 轨迹播放的角度，默认为55
    duration: 20000, // 动画持续时长，默认为10000，单位ms
    delay: 3000, // 动画开始的延迟， 默认0， 单位ms
  });

  document.getElementById("start").addEventListener("click", function () {
    trackAni.start();
  });

  document.getElementById("end").addEventListener("click", function () {
    trackAni.cancel(); // 强制停止动画
  });
</script>
